<template>
	<view>
		<view class="pointsmall-title">
			<view class="title-left" @click="myPoints">
				<image src="@/static/logo.png" class="left-image" mode=""></image>
				<view class="points">
					<text class="my-points">我的积分:</text>
					<text class="number-points">150</text>
				</view>
			</view>
			<view class="title-right" @click="redeemOrder">
				<text>兑换订单</text>
				<u-icon name="arrow-right" color="#fff" size="18"></u-icon>
			</view>
		</view>
		<view class="pointsmall-content">
			<view v-for="(item,index) in fontData" :key="index" :class="state == index ? 'font-active' : '' "
				@click="fontactive(index)">
				{{ item.name }} 
				<text v-if="item.id == 1" class="triangle-top"></text>
				<text v-if="item.id == 1" class="triangle-bottom"></text>
			</view>
			<u-icon name="grid" size="25"></u-icon>
		</view>
		<u-empty
		        mode="coupon"
				text="暂无优惠卷"
		>
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态值初始状态
				state: '0',
				// 顶部栏字体数据
				fontData: [{
						name: '最新',
						id:0
					},
					{
						name: '积分',
						id:1
					},
					{
						name: '兑换量',
						id:0
					},
				]
			}
		},
		methods: {
			// 顶部栏点击事件
			fontactive(index) {
				this.state = index
			},
			// 我的积分跳转积分签到页面
			myPoints(){
				uni.navigateTo({
					url:'/pages/index/signin/signin'
				})
			},
			// 跳转兑换订单页面
			redeemOrder(){
				uni.navigateTo({
					url:'/pages/index/redeemOrder/redeemOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pointsmall-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #FF2C3C;
	}

	.title-left {
		display: flex;
		justify-content: space-between;
	}

	.left-image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}

	.points {
		color: white;
		display: flex;
		align-items: center;
	}

	.my-points {
		margin-left: 20rpx;
	}

	.number-points {
		font-weight: bold;
		margin-left: 20rpx;
	}

	.title-right {
		display: flex;
		align-items: center;
		color: white;
	}

	.pointsmall-content {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx 20rpx 40rpx;
	}

	.font-active {
		color: red;
	}
	
	.triangle-top{
		border-top: 10rpx solid transparent;
		border-bottom: 10rpx solid black;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		position: relative;
		bottom: 35rpx;
	}
	.triangle-bottom{
		border-top: 10rpx solid black;
		border-bottom: 10rpx solid transparent;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		position: relative;
		top: 32rpx;
		right: 20rpx;
	}
</style>